<!DOCTYPE html>
<html>
	<head>
		<!--bootstrap font-awesome 等-->
		<link rel="stylesheet" href="css/bootstrap-theme.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/font-awesome.css" />
		<!--房源管理页css-->
		<link rel="stylesheet" href="css/housecontrol.css" />
		<link rel="bookmark" type="image/x-icon" href="img/favicon.ico" />
		<link rel="shortcut icon" href="img/favicon.ico">
		<link rel="icon" href="img/favicon.ico">
		<meta charset="UTF-8">
		<title>房源管理</title>
	</head>
	<body>
		<div class="container-fluid">
			<!--导航栏-->
			<div class="row wxm-top" >
				<div class="col-md-12">
					<!--标题-->
					<div class="col-md-3 wxm-top-title">
						<span>房源管理:<span id="housecount"></span>个房源</span>
					</div>
					<!--输入框-->
					<div class="col-md-5 col-md-offset-1">
                        <div class="input-group wxm-housesearch">
                            <div class="input-group-addon ">
                                <i class="fa fa-search" aria-hidden="true"></i>
                            </div>
                            <input type="text" name="housesearch" class="form-control" placeholder="按房源名称、位置等进行搜索">
                        </div>
                	</div>
                	<!--回到首页-->
                	<div class="col-md-1 col-md-offset-2 return-index" id="return-index">回到首页</div>
				</div>
			</div>
			<!--内容-->
			<div class="row wxm-housearea">
				<div class="col-md-12  offpadding" id="leftarea">
                    <div class="data-div tab-pane">
                        <div class="row tableHeader">
                            <div title="房源名称" class="col-md-2">房源名称</div>
							<div title="房源类型" class="col-md-2">房源类型</div>
							<div title="容纳人数" class="col-md-2">容纳人数</div>
							<div title="单日价格" class="col-md-2">单日价格</div>
							<div title="所在地区" class="col-md-2">所在地区</div>
							<div title="状态/操作" class="col-md-2">状态/操作</div>
                        </div>
                        <div class="tablebody" id="houseinfo">
                            <div class="row tablebodyinfo">
                                <div title="需要服务器数据" class="col-md-2">示例</div>
								<div title="需要服务器数据" class="col-md-2">示例</div>
								<div title="需要服务器数据" class="col-md-2">示例</div>
								<div title="需要服务器数据" class="col-md-2">示例</div>
								<div title="需要服务器数据" class="col-md-2">示例</div>
	                            <div class="col-xs-2 offpadding">
	                                <button class="btn btn-success btn-sm" data-toggle="modal"data-target="#changehouse">修改</button>
	                                <button class="btn btn-danger btn-sm" data-toggle="modal"data-target="#deletehouse">删除</button>
	                            </div>
                    		</div>
	                    </div>
            		</div>
            		<!--删除模态框-->
        			<div class="modal fade" id="deletehouse" role="dialog" aria-labelledby="houseModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="houseModalLabel">提示</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="container-fluid">
                                    	确定要删除该房源？<br/>删除后不可恢复！<br/>请谨慎选择！！！
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-sm btn-info" data-dismiss="modal">取 消</button>
                                    <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal" id="btn-delete">确 定</button>
                                </div>
                            </div>
                        </div>
                    </div><!--修改模态框div-->
                    <div class="modal fade" id="changehouse" role="dialog" aria-labelledby="houseinfoLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="houseinfoLabel">房源详情</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="container-fluid">
                                    	<!--第一行输入框（标题/名称）-->
									<div class="row">
										<div class="col-md-10 col-md-offset-1 input-lebel">
											<h4>房源名称/标题</h4>
										</div>
										<div class="col-md-10 col-md-offset-1">
											<input class="form-control"  id="housename"/>
										</div>
									</div>
									<!--第二行输入框（出租/房源类型）-->
									<div class="row">
										<div class="col-md-5 input-lebel col-md-offset-1">
											<h4>出租类型</h4>
										</div>
										<div class="col-md-5 input-lebel">
											<h4>房源类型</h4>
										</div>
										<div class="col-md-5 col-md-offset-1 wxm-offleftwidth" id="wxm-fangyuan">
											<select id="renttype" class="form-control">
												<option value="1">整套房子</option>
												<option value="2">独立房间</option>
												<option value="3">合住房间</option>
												<option value="4">沙发客</option>
												<option value="5">地铺</option>
											</select>
										</div>
										<div class="col-md-5  wxm-offleftwidth" id="wxm-fangke">
											<select id="housetype" class="form-control">
												<option value="1">公寓</option>
												<option value="2">普通民宅</option>
												<option value="3">附属单元</option>
												<option value="4">特色房源</option>
												<option value="5">精品酒店</option>
											</select>
										</div>
									</div>
									<!--第三行输入框（各种数量）-->
									<div class="row">
										<div class="col-md-5 col-md-offset-1 input-lebel" style="text-align:left;">
											<h4>房客数量</h4>
										</div>
										<div class="col-md-5  input-lebel" style="text-align:left;">
											<h4>卧室数量</h4>
										</div>
										<div class="col-md-5 col-md-offset-1 wxm-offleftwidth">
											<input class="form-control" id="unum"/>
										</div>
										<div class="col-md-5  wxm-offleftwidth">
											<input class="form-control" id="roomnum"/>
										</div>
									</div>	
									<!--第四行输入框（各种数量）-->
									<div class="row">
											<div class="col-md-5 col-md-offset-1 input-lebel" style="text-align:left;">
												<h4>床铺数量</h4>
											</div>
											<div class="col-md-5  input-lebel" style="text-align:left;">
												<h4>卫生间数量</h4>
											</div>
											<div class="col-md-5 col-md-offset-1  wxm-offleftwidth">
												<input class="form-control" id="bednum" />
											</div>
											<div class="col-md-5 wxm-offleftwidth">
												<input class="form-control" id="wcnum"/>
											</div>
									</div>
									<!--第五行输入框（详细地址）-->
									<div class="row">
										<div class="col-md-10 col-md-offset-1 input-lebel">
											<h4>您的房源详细地址</h4>
										</div>
										<div class="col-md-10 col-md-offset-1">
											<input class="form-control" id="adress"/>
										</div>
									</div>
									<!--第六行输入框（设施）-->
									<div class="row">
										<div class="col-md-10 col-md-offset-1 input-lebel">
											<h4 style="font-weight: bold;">便利设施</h4>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="1" value="1">生活必需品
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="2" value="2">无线网
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="3" value="3">洗发水
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="4" value="4">抽屉/壁橱
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="5" value="5">电视
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="6" value="6">暖气
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="7" value="7">空调
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="8" value="8">早餐
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="9" value="9">书桌
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="12" value="12">吹风机
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="10" value="10">壁炉
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="11" value="11">熨斗
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="13" value="13">独立入口
										    </label>
										</div>
									</div>
									<!--第七行输入框（设施）-->
									<div class="row">
										<div class="col-md-10 col-md-offset-1 input-lebel">
											<h4 style="font-weight: bold;">安全设施</h4>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="14" value="14">烟雾报警器
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="15" value="15">一氧化碳报警器
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="16" value="16">急救包
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="17" value="17">灭火器
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="18" value="18">带锁的卧室
										    </label>
										</div>
									</div>
									<!--第八行输入框（设施）-->
									<div class="row">
										<div class="col-md-10 col-md-offset-1 input-lebel">
											<h4 style="font-weight: bold;">房屋设施</h4>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="19" value="19">游泳池
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="20" value="20">厨房
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="21" value="21">洗衣机
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="22" value="22">干衣机
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="23" value="23">停车位
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="24" value="24">电梯
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="25" value="25">按摩浴缸
										    </label>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c1" id="26" value="26">健身房
										    </label>
										</div>
									</div>
									<!--第九行输入框（wc）-->
									<div class="row">
										<div class="col-md-10 col-md-offset-1 input-lebel">
											<h4 style="font-weight: bold;">其他</h4>
										</div>
										<div class="col-md-5 col-md-offset-1 setleft">
										    <label>
										      <input type="checkbox" name="c2" id="iswcp">提供专用卫生间
										    </label>
										</div>
									</div>
                                    <!--第十行输入框（价格）-->
									<div class="row" style="margin-bottom:20px;">
										<div class="col-md-10 col-md-offset-1 input-lebel">
											<h4 style="font-weight: bold;">单价/每天(人民币)</h4>
										</div>
										<div class="col-md-10 col-md-offset-1">
											<input class="form-control" id="price"/>
										</div>
									</div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-sm btn-info" data-dismiss="modal">取 消</button>
                                    <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" id="btn-update" value="">提交</button>
                                </div>
                            </div>
                        </div>
                    </div><!--修改模态框div-->
				</div>
							
					
				</div>
			</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	<script>
		//返回首页按钮
		$("#return-index").click(function (){
			window.location.href = "index.html";
		});
		//删除
		function deletehouse(obj){
			$("#btn-delete").click(function(){
				var houseid = obj.value;
				//alert(houseid);
				$.ajax({
					url: "deleteHouse.do",
					async: false,
				   	type: "post",
				   	data: {"houseid":houseid},
				   	error: function (){
				   		alert("ajax请求失败")
				   	},
				   	success: function(data){
				   		alert("删除成功");
				   		getallhouse();
				   	}
				});
			})
		}
		/**
		 * ajax获取全部用户数据
		 */
		function getallhouse() {
			$.ajax({
				type: "post",
				url: "getallhouse.do",
				async: true,
				dataType: "text",
				error: function () {
					alert("ajax请求失败");
				},
				success: function (response) {
					if (response != "") {
						var json = eval("(" + response + ")");
						$("#houseinfo").empty();
						console.log(json);
						console.log(json.length);
						$("#housecount").text(json.length);
						for(var i = 0;i<json.length;i++){
				   			var houseid = json[i].houseid;
				   			var htid = json[i].htid;
				   			var htname = "示例";
				   			if(htid==1){
				   				htname = "公寓";
				   			}
				   			else if(htid == 2){
				   				htname = "普通民宅";
				   			}
				   			else if(htid == 3){
				   				htname = "附属单元";
				   			}
				   			else if(htid == 4){
				   				htname = "特色房源";
				   			}
				   			else if(htid == 5){
				   				htname = "精品酒店";
				   			}
				   			var unum = json[i].unum;
				   			var adress = json[i].adress;
				   			var price = json[i].price;
				   			var housename = json[i].housename;
				   		 	$("#houseinfo").append('<div class="row tablebodyinfo"><div title="'+housename+'" class="col-md-2">'+housename+'</div><div title="'+htname+'" class="col-md-2">'+htname+'</div><div title="'+unum+'" class="col-md-2">'+unum+'</div><div title="'+price+'" class="col-md-2">'+price+'</div><div title="'+adress+'" class="col-md-2">'+adress+'</div><div class="col-xs-2 offpadding"><button class="btn btn-success btn-sm" data-toggle="modal"data-target="#changehouse"value="'+houseid+'" onclick="alterhouse(this)">修改</button> <button class="btn btn-danger btn-sm" data-toggle="modal"data-target="#deletehouse"value="'+houseid+'"onclick="deletehouse(this)">删除</button></div></div>');
				   			}
					} else {
						alert("获取房源数据失败");
					}
				}
			});
		}
		//点击显示修改详情
		function alterhouse(obj){
			var houseid = obj.value;
			$("#btn-update").val(houseid);
			$("input[name='c1']").removeAttr("checked");
			//alert("房源id打印测试： "+houseid);
			$.ajax({
				url: "alterHouse.do",
			   	type: "post",
			   	data: {"houseid":houseid},
			   	dataType:"text",
			   	error: function (){
			   		alert("ajax请求失败")
			   	},
			   	success: function(response){
			   		if (response != "") {
						var json = eval("(" + response + ")");
						console.log(json);
						for(var i = 0;i<json.length;i++){
							var eqid = json[i].eqid;
							var id1 = "#"+eqid;
							$(id1).attr("checked",'true');
						}
						for(var i=0;i<6;i++){
				   			c = i+1;
				   			if(json[0].htid==c){
					   		 var options = document.getElementById('housetype').children;
					   		 options[i].selected=true;
					   		}
				   		}
				   		for(var a = 0;a<6;a++){
				   			var b = a+1;
				   			if(json[0].htid==b){
					   		 var options = document.getElementById('renttype').children;
					   		 options[a].selected=true;
					   		}
				   		}
				   		if(json[0].iswcp==1){
					   		$("#iswcp").attr("checked",'true');
					   		}
				   		else{
				   		 	$("#iswcp").removeAttr("checked");
				   		}
				   		$("#housename").val(json[0].housename);
				   		$("#unum").val(json[0].unum);
				   		$("#roomnum").val(json[0].roomnum);
				   		$("#wcnum").val(json[0].wcnum);
				   		$("#bednum").val(json[0].bednum);
				   		$("#adress").val(json[0].adress);
				   		$("#price").val(json[0].price);
				   		$("#houseid").val(json[0].houseid);
					} else {
						alert("获取房源详情失败");
					}
			   		
			   	}
			});
		}
		//更新房源数据
		$("#btn-update").click(function(){
			var c1 = $("input[name='c1']:checked");
			var ca1 = new Array(); //js数组
			for(var i = 0; i < c1.length; i++){
				ca1.push(c1[i].value);
			}
			var housename = $("#housename").val();
			var unum = $("#unum").val();
			var roomnum = $("#roomnum").val();
			var wcnum = $("#wcnum").val();
			var bednum = $("#bednum").val();
			var adress = $("#adress").val();
			var price = $("#price").val();
			var houseid = $("#btn-update").val();
			var housetype = $("#housetype").find("option:selected").val();
			var renttype = $("#renttype").find("option:selected").val();
			var wc = $("input[name='c2']:checked").val();
			var iswcp ;
			if(wc=="on"){
				iswcp = 1;
			}else{
				iswcp = 0;
			}
			$.ajax({
				url: "updateHouse.do",
				async: false,
			   	type: "post",
			   	data: {"c1":ca1,"housename":housename,"unum":unum,"roomnum":roomnum,"wcnum":wcnum,"bednum":bednum,"adress":adress,"price":price,"houseid":houseid,"housetype":housetype,"renttype":renttype,"iswcp":iswcp},
			   	error: function (){
			   		alert("ajax请求失败")
			   	},
			   	success: function(data){
			   		alert("房源名称为：--"+housename+"--的房源信息修改成功");
			   		getallhouse();
			   	}
			});
		})
		//页面加载
		$(document).ready(function () {
			// 获取房源数据
			getallhouse();
		});
	</script>
</html>
